<template>
	<el-card class="box-card">
		<div slot="header" class="clearfix">
			<span>菜单权限</span>
		</div>
		<el-alert class="tips" title="Tips" type="warning" description="设置后台管理系统的左侧菜单，目前至多支持两层菜单，三层以上菜单将不会显示。"
			show-icon>
		</el-alert>
		<el-tree :props="defaultProps" :load="loadNode" ref="tree" lazy node-key="id" :default-expanded-keys="[1]">
			<span class="custom-tree-node" slot-scope="{ node, data }">
				<div>{{ node.label }}</div>
				<div class="menu-btn">
					<el-popover placement="left" width="150" trigger="hover">
						<i :class="'el-icon-'+ data.icon" style="font-size: 30px">{{data.icon==null?"无":''}}</i>
						<el-button slot="reference" :disabled="data.id===1" align="left" type="text" size="mini"
							:icon="'el-icon-'+ data.icon" @click.stop="showIcomForm(data.id,node)">图标</el-button>
					</el-popover>
					<el-button :disabled="data.id===1" align="left" type="text" size="mini" icon="el-icon-edit"
						@click.stop="showEdtiForm(node,data)">编辑</el-button>
					<el-button type="text" size="mini" align="left" icon="el-icon-plus"
						@click.stop="showAddForm(node,data.id)">添加</el-button>
					<el-button :disabled="data.id===1" align="left" type="text" size="mini" icon="el-icon-delete"
						@click.stop='hendleRemove(node, data)'>删除</el-button>
					<span class="serialNum">显示序号：<el-button type="primary" align="left" size="mini" plain>
							{{data.order}}
						</el-button></span>
				</div>
			</span>
		</el-tree>
		<!-- icon -->
		<el-dialog title="选择图标" :visible.sync="addIconForm" width="70%">
			<div class="iconBox">
				<template v-for="(item,index) in iconForm">
					<div class="icons" :class="activeClass==index?'checked':''"
						@click="changeIcon(item.id,index,item.name)">
						<i :class="'el-icon-'+ item.name" style="padding-top: 20px;"></i>
						<p style="font-size: 12px;">el-icon-{{item.name}}</p>
					</div>
				</template>
			</div>
			<el-pagination @current-change="handleCurrentChange" background layout="prev, pager, next" :total=total
				:page-size="30" style="padding-top: 20px; text-align: right;">
			</el-pagination>
			<div slot="footer" class="dialog-footer">
				<el-button @click="addIconForm = false">取 消</el-button>
				<el-button type="primary" @click="handleIconSave">确 定</el-button>
			</div>
		</el-dialog>
		<!-- 编辑节点 -->
		<el-dialog title="编辑节点" :visible.sync="editDialogForm">
			<el-form :model="editForm" :rules="rules" ref="editForm">
				<el-form-item label="活动名称" prop="name" label-width="80px">
					<el-input v-model="editForm.name" autocomplete="off"></el-input>
				</el-form-item>
				<el-form-item label="组件名称" label-width="80px">
					<el-input v-model="editForm.component" autocomplete="off" placeholder="指定此菜单对应的组件名称"></el-input>
				</el-form-item>
				<el-form-item label="链接地址" label-width="80px">
					<el-input v-model="editForm.path" autocomplete="off" placeholder="指定此菜单对应的链接地址"></el-input>
				</el-form-item>
				<el-form-item label="显示顺序" prop="order" label-width="80px">
					<el-input v-model="editForm.order" autocomplete="off"></el-input>
				</el-form-item>
			</el-form>
			<div slot="footer" class="dialog-footer">
				<el-button @click="editDialogForm = false">取 消</el-button>
				<el-button type="primary" @click="hendleEdit">确 定</el-button>
			</div>
		</el-dialog>
		<!-- 添加节点 -->
		<el-dialog title="添加节点" :visible.sync="addDialogForm">
			<el-form :model="addForm" :rules="rules" ref="addForm">
				<el-form-item label="活动名称" prop="name" label-width="80px">
					<el-input v-model="addForm.name" autocomplete="off"></el-input>
				</el-form-item>
				<el-form-item label="组件名称" label-width="80px">
					<el-input v-model="addForm.component" autocomplete="off" placeholder="指定此菜单对应的组件名称"></el-input>
				</el-form-item>
				<el-form-item label="链接地址" label-width="80px">
					<el-input v-model="addForm.path" autocomplete="off" placeholder="指定此菜单对应的链接地址"></el-input>
				</el-form-item>
				<el-form-item label="显示顺序" prop="order" label-width="80px">
					<el-input v-model="addForm.order" autocomplete="off"></el-input>
				</el-form-item>
			</el-form>
			<div slot="footer" class="dialog-footer">
				<el-button @click="addDialogForm = false">取 消</el-button>
				<el-button type="primary" @click="hendleAdd">确 定</el-button>
			</div>
		</el-dialog>
	</el-card>
</template>

<script>
	import { Menu, Icon } from '@/api/'

	export default {
		data() {
			return {
				total: 300,
				activeClass: -1,
				iconId: '',
				changeIconId: '',
				iconName: '',
				pageForm: {
					pageIndex: 1,
					pageSize: 30
				},
				node: {},
				addIconForm: false,
				addDialogForm: false,
				editDialogForm: false,
				iconForm: [],
				addForm: {
					name: '',
					path: '',
					order: '',
					component: ''
				},
				editForm: {
					name: '',
					path: '',
					order: '',
					component: ''
				},
				rules: {
					name: [
						{ required: true, message: '请输入角色', trigger: "blur" }
					],
					order: [
						{ required: true, message: '请输入角色', trigger: "blur" }
					],
				},
				defaultProps: {
					label: 'name'
				}
			}
		},
		methods: {
			async handleCurrentChange(val) {
				this.pageForm.pageIndex = val;
				this.iconForm = this.iconsForm(this.pageForm);
				this.activeClass = -1;
			},
			async iconsForm(form) {
				let { status, icons } = await Icon.list(form);
				if (status) {
					this.iconForm = icons
				}
			},
			//编辑icon--start
			changeIcon(icon, index, name) {
				this.activeClass = index;
				this.iconId = icon;
				this.iconName = name;
			},
			showIcomForm(id, node) {
				this.addIconForm = true;
				this.changeIconId = id;
				this.iconForm = this.iconsForm(this.pageForm);
				this.node = node;
			},
			async handleIconSave() {
				let { status } = await Menu.icon({ id: this.changeIconId, icon: this.iconId })
				if (status) {
					this.node.data.icon = this.iconName;
					this.$message.success("图标替换成功!")
					this.addIconForm = false;
				} else {
					this.$message.error("图标替换失败!")
				}
			},

			//编辑icon--end
			showEdtiForm(node, data) {
				this.node = node;
				this.editForm = data;
				this.editDialogForm = true;
			},
			showAddForm(node, id) {
				this.node = node;
				this.addForm.pId = id;
				this.addDialogForm = true;
			},
			//删除
			hendleRemove(node, data) {
				this.$confirm('此操作将永久删除该文件, 是否继续?', '提示', { type: 'warning' })
					.then(async () => {
						let { status } = await Menu.remove({ id: data.id });
						if (status) {
							this.$message.success('删除成功!');
							this.$refs.tree.remove(node);
						} else {
							this.$message.error('删除失败!')
						}
					}).catch(() => {
						this.$message({
							type: 'info',
							message: '已取消删除'
						});
					});
			},
			//添加
			hendleAdd() {
				this.$refs.addForm.validate(async (valid) => {
					if (valid) {
						let { status } = await Menu.add({ ...this.addForm });
						if (status) {
							this.addDialogForm = false;
							this.$message.success("添加成功!");
							this.addForm = {
								name: '',
								path: '',
								order: '',
								component: ''
							}
						} else {
							this.$message.error("添加失败!");
						}
					}
				})
			},
			//编辑
			hendleEdit() {
				this.$refs.editForm.validate(async (valid) => {
					if (valid) {
						let { status } = await Menu.edit({ ...this.editForm });
						if (status) {
							this.node.data = this.editForm;
							this.$message.success("编辑成功!");
							this.editDialogForm = false;
						} else {
							this.$message.error("编辑失败!");
						}
					}

				})
			},
			async loadNode(node, resolve) {
				//节点对象  生成节点函数
				if (node.level === 0) {
					return resolve([{ id: 1, name: '全部分类', order: '0' }]);
				};
				let { id } = node.data;
				let { status, data } = await Menu.list({ pId: id });
				if (status) {
					resolve(data);
				};
			},
		}
	}
</script>

<style lang="less" scoped>
	.tips {
		margin-bottom: 30px;
	}



	.iconBox {
		border: 1px solid #eee;
		border-right: none;
		border-bottom: none;
		border-radius: 4px;
		overflow: hidden;
		padding: 0;
		margin: 0;
		display: flex;
		flex-wrap: wrap;

		.icons {
			font-size: 24px;
			padding: 10px 10px;
			width: 10%;
			height: 130px;
			border-bottom: 1px solid #eee;
			border-right: 1px solid #eee;
			box-sizing: border-box;
			text-align: center;
			transition: 0.2s;
			cursor: pointer;

			&:hover {
				color: #1989FA;
			}
		}

		.checked {
			background-color: #1989FA;
			color: #ffffff;

			&:hover {
				color: #ffffff;
			}
		}
	}

	.box-card {
		.custom-tree-node {
			flex: 1;
			display: flex;
			align-items: center;
			justify-content: space-between;
			font-size: 14px;
			padding-right: 8px;
		}

		.serialNum {
			display: inline-block;
			width: 100px;
			font-size: 12px;
			padding-left: 5px;

			.el-button {
				padding: 3px;
			}
		}
	}
</style>
